<template>
  <q-page class="q-pa-md">
    <q-item class="justify-between items-center">
      <div class="text-h5">
        {{ 'Управление специализациями' }}
      </div>
      <q-btn color="primary"
             style="width: 300px; border-radius: 4px"
             @click="openCreateModalityModal">
        {{ 'Создать' }}
      </q-btn>
    </q-item>
    <q-list class="q-pa-md">
      <q-item v-for="item in modalitiesList"
              clickable
              :key="item.id"
              style="border: 1px solid grey"
              class="justify-between bg-blue-grey-3 rounded-borders q-mt-md"
              @click.self="openEditModalityModal($event, item)">
        <div>
          <q-item-section class="text-bold">
            {{ `Название специализации: ${item.name}` }}
          </q-item-section>
          <q-item-section style="margin-left: 0">
            {{ `Код специализации: ${item.code}` }}
          </q-item-section>
        </div>
        <q-btn style="border: 2px solid black; z-index: 20"
               icon="delete"
               flat round
               @click="deleteModality(item.code)"/>
      </q-item>
    </q-list>
    <create-modality-modal />
    <edit-modality-modal />
  </q-page>
</template>

<script setup>
import {computed, defineComponent, onMounted, reactive, ref, toRaw} from "vue";
import {modalitiesStore} from "stores/modalities-store";
import CreateModalityModal from "components/CreateModalityModal.vue";
import EditModalityModal from "components/EditModalityModal.vue";
import Notifier from 'src/helpers/Notifier'

defineComponent({
  name: 'ManageModalitiesStore'
});

const modalities = modalitiesStore()

onMounted(async () => {
  await modalities.getModalitiesList()
})

const modalitiesList = computed(() => modalities.modalitiesList)

const openCreateModalityModal = (modality) => {
  modalities.creatableModality = modality
  modalities.isCreating = true
}
const openEditModalityModal = (event, modality) => {
  modalities.editableModality = modality
  modalities.isEditing = true
}

const deleteModality = async (code) => {
  try {
    Notifier.confirmAlert('Вы действительно хотите удалить специализацию?', async () => {
      await modalities.deleteModality(code)
    })
  } catch (err) {
    console.error(err)
  }
}
</script>

<style lang="scss" scoped>

</style>
